<template>
  <div class="WorksChoose">
    <div class="flex" style="padding: .1rem;justify-content: left;flex-wrap: wrap">
      <div class="flex-item work-item" v-for="v in dDataList">
        <ImageBlock :img-src="domain+'/Uploads'+v.m_path" class="ImageBlock" width="4.7rem">
          <span slot="rightTop">
            <CheckBtn :check_id="v.works_id" style="margin:.2rem" :data-id="v.works_id" @changeCheckState="changeCheckState" width=".4rem" height=".4rem"></CheckBtn>
          </span>
        </ImageBlock>
      </div>
    </div>
    <div class="btnsArea flex">
      <div class="flex-item">
        <BtnCommon class="col-xs-12" bgColor="#00DACD" @click.native="submitChoose">添加到作品集</BtnCommon>
      </div>
      <div class="flex-item">
        <BtnCommon class="col-xs-12" bgColor="#C4C4C4" @click.native="closeMe">取 消</BtnCommon>
      </div>
    </div>
    <AlertBottom ref="ab"></AlertBottom>
    <ConfirmBottom ref="cb"></ConfirmBottom>
  </div>
</template>
<style scoped>
.ImageBlock{margin: 0 auto}
.WorksChoose{position: relative;background: white;height: 100%;overflow-y: scroll}
.btnsArea{position: fixed;width: 10rem;left:0;bottom:0 !important;height: auto;background: #8C8B8B;z-index: 1000}
.work-item{max-width: 4.85rem;min-width:4.85rem;height: 3rem;margin-top: .1rem;padding: .1rem;box-sizing: border-box;margin-top:.2rem;}
</style>
<script>
import ImageBlock from "../../components/images/ImageBlock";
import CheckBtn from "../../components/buttons/CheckBtn";
import BtnCommon from "../../components/buttons/BtnCommon";
export default {
  name:"WorksChoose",
  components: {CheckBtn, ImageBlock, BtnCommon},
  props:{
    dataList:{
      default:[]
    }
  },
  data(){
   return {
     dDataList:[],
     WorksIdChoose:[]
   }
  },
  methods:{
    changeCheckState(p){
      if (p.check_status){
        this.WorksIdChoose.push(p.check_id)
      }else{
        this.WorksIdChoose.remove(p.check_id)
      }
    },
    closeMe(){
      this.$emit('closeMe')
    },
    submitChoose(){
      let _this=this
      if (_this.WorksIdChoose.length==0){
        _this.$refs.ab.setIcon("fa fa-exclamation-triangle").setAutoClose(true).setContent('没有选择作品').show()
        return false
      }
      this.$emit('submit',this.WorksIdChoose)
    }
  },
  mounted() {
    let _this = this
    _this.dDataList =_this.dataList
  }
}
</script>
